<!doctype html>
<html>
<head>
  <title>Ohm</title>
  <link rel="stylesheet" href="style/semanticsButton.css">
  <link rel="stylesheet" href="style/suggestionList.css">
  <link rel="stylesheet" href="style/examples.css">
  <link rel="stylesheet" href="style/exampleGenerationLinks.css">
  <link rel="stylesheet" href="style/parseTree.css">
  <link rel="stylesheet" href="third_party/codemirror-5.11/lib/codemirror.css">
  <style>
    html, body {
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
      font-family: Helvetica, Arial, sans-serif;
      margin: 0;
      overflow: hidden;
      padding: 0;
    }
    #dragOverlay {
      bottom: 0;
      display: none;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;

      /* Must be less than the .splitter z-index, but greater than everything in codemirror.css. */
      z-index: 9;
    }

    #grammars {
      color: black;
      font-style: normal;
      border-radius: 3px;
      padding: 2px 12px 1px 6px;
      position: absolute;
      top: 8px;
      right: 0;
    }
    #grammars label {
      font-size: 0.75em;
    }
    #grammarName {
      font-family: Menlo, Monaco, sans-serif;
    }
    #grammarName.unnamed {
      font-style: italic;
      color: #999;
    }

    #saveIndicator {
      color: #999;
      display: inline-block;
      overflow: hidden;
      vertical-align: middle;
    }
    #saveIndicator > * {
      overflow: hidden;
    }
    #saveIndicator.edited #saved,
    #saveIndicator:not(.edited) #edited {
      height: 0;
    }

    #options {
      background-color: white;
      border-radius: 3px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
      font-size: 14px;
      padding: 8px 12px 10px 10px;
      position: fixed;
      bottom: 25px;
      right: 15px;
    }
    #options input[type=checkbox] {
      position: relative;
      margin: 0 6px 0 0;
      top: -1px;
    }
    #options ul {
      list-style: none;
      margin: 0.3em 0 0 0;
      padding: 0;
    }

    #measuringDiv {
      height: auto;
      position: absolute;
      visibility: hidden;
      white-space: nowrap;
      width: auto;
    }

    #topSection {
      display: flex;
      flex: 1;
    }

    #bottomSection {
      display: flex;
      flex: 1;

    }

    #bottomSection .overlay {
      background-color: white;
      height: 100%;
      left: 0;
      opacity: 0.4;
      position: absolute;
      top: 0;
      width: 0;
    }

    #exampleContainer {
      display: flex;
      flex-direction: row;
      flex: 1;
    }

    #exampleRequestContainer,
    #userExampleContainer,
    #grammarContainer,
    #semanticsContainer,
    #visualizerContainer {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }

    #semanticsContainer[hidden] {
      display: none;
    }

    #grammarContainer,
    #semanticsContainer,
    #visualizerContainer {
      position: relative;
    }

    #exampleContainer[hidden] {
      display: none;
    }

    #userExampleContainer .editorWrapper {
      margin-top: 20px;
      min-height: 60px;
    }

    h2 {
      color: #e0a;
      font-size: 1em;
      margin: 12px 12px 10px;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
    }

    /*
      Hack to fix a problem with `height: 100%` in flex items.
      See https://github.com/codemirror/CodeMirror/issues/3679
     */
    .flex-fix {
      flex: 1;
      position: relative;
    }

    .editorWrapper .CodeMirror {
      font-family: Menlo, Monaco, sans-serif;
      font-size: 12px;
      height: 100%;
      position: absolute;  /* See .flex-fix above. */
      width: 100%;
    }

    .CodeMirror .error-interval {
      border-bottom: 1px dashed #C7254E;
    }

    .CodeMirror.highlighting {
      color: rgba(51, 51, 51, 0.8);
    }

    .CodeMirror .highlight {
      background-color: #B5D5FF;
    }

    .CodeMirror .error {
      background-color: #FBE3EA;
      border-radius: 2px;
      color: #C7254E;
      margin: 2px 4px;
      padding: 12px;
    }
    .CodeMirror .error .link {
      cursor: pointer;
      text-decoration: underline;
    }
    .CodeMirror .error .link:active {
      color: #941B3A;  /* #C7254E, but 20% darker. */
    }

    .CodeMirror div {
      background-color: rgba(238, 0, 170, 0);
      transition: background-color .25s ease-in-out;
    }
    .CodeMirror .active-definition {
      background-color: rgba(238, 0, 170, 0.1);
    }

    .CodeMirror .active-appl {
      font-weight: bold;
      position: relative;
      color: black;
    }
    .CodeMirror-lines {
      padding-top: 0;
    }
    .CodeMirror-lines pre {
      padding-left: 14px;
    }

    .footer {
      align-items: stretch;
      background-color: #ececec;
      border-top: 1px solid #ddd;
      color: #666;
      display: flex;
      margin-top: 1px;
      overflow: hidden;
      padding: 5px 6px 4px 6px;
    }
    .footer[hidden] {
      display: none;
    }
    .footer [type=search] {
      border: 1px solid hsl(225,10%,85%);
      border-radius: 3px;
      flex: 1;
      height: 19px;
      margin-right: 4px;
      padding: 2px 3px 2px 0;
    }
    .footer [type=button] {
      position: relative;
      top: 1px;
    }
    .footer [type=search]:focus {
      box-shadow: 0 0 0 1px hsla(216, 89%, 62%, .5) inset,
                  0 0 0 1px hsla(216, 89%, 62%, .5);
      border-color: hsl(217,60%,71%);
      outline: none;
    }

    .splitter {
      background-color: #ddd;
      height: 1px;
      min-height: 1px;
      overflow: visible;
      position: relative;
    }
    .vertical.splitter {
      height: auto;
      min-height: auto;
      min-width: 1px;
      width: 1px;
    }
    .splitter .handle {
      bottom: -2px;
      cursor: ns-resize;
      left: 0;
      position: absolute;
      right: 0;
      top: -2px;
      z-index: 10;
    }
    .vertical.splitter .handle {
      bottom: 0;
      cursor: ew-resize;
      left: -2px;
      right: -2px;
      top: 0;
    }

    .externalRules {
      color: #999;
      margin: 0;
      padding-top: 14px;
    }
    .externalRules .content {
      border-top: 1px solid #eee;
      padding-top: 14px;
    }
    .externalRules pre {
      margin-bottom: 14px;
    }

    .contextMenu {
      background-color: #f0f0f0;
      border: 1px solid #bbb;
      border-radius: 4px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
      position: fixed;
      left: 20px;
      top: 20px;
      z-index: 11;  /* Must be great than .splitter .handle */
    }
    .contextMenu > ul {
      margin: 6px 0;
      padding: 0;
    }
    .contextMenu ul ul {
      left: 100%;
      top: 0;
      padding: 0;
      margin-top: -1px;  /* For aligning diff caused by 1px border */
      position: absolute;
      border-radius: 4px;
      border: 1px solid #bbb;
      border-left-color: rgba(187, 187, 187, 0.26);
      background-color: #f0f0f0;
    }
    .contextMenu li {
      position: relative;  /* For position submenus */
      display: flex;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 14px;
      padding: 2px 20px;
    }
    .contextMenu li.disabled {
      color: #aaa;
    }
    .contextMenu li:hover {
      cursor: default;
    }
    .contextMenu li:hover:not(.disabled) {
      background-color: #4f9dfb;
    }
    .contextMenu li:hover:not(.disabled) > label {
      color: white;
    }
    .contextMenu li:not(.disabled):hover > ul {
      display: block;
    }

    #timeline {
      display: flex;
      height: 20px;
      margin: 5px 10px;
    }
    #timeSlider {
      flex: 1;
    }

    /*
      Use media query hack to enable custom styling on WebKit/Blink only.
      Other browsers will ignore these rules.
     */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      #timeSlider {
        -webkit-appearance: none;
        background-color: #ccc;
        height: 1px;
        position: relative;
        top: 50%;
      }
      #timeSlider::-webkit-slider-thumb {
         -webkit-appearance: none;
        background-color: #aaa;
        border-radius: 5px;
        height: 10px;
        position: relative;
        top: -1px;
        width: 10px;
      }
      #timeSlider:focus::-webkit-slider-thumb {
        background-color: rgb(53, 151, 255);
        box-shadow: 0 0 0 4px rgba(53, 151, 255, 0.4);
      }
      #timeSlider:focus {
        outline: none;
      }
    }
  </style>
  <link rel="stylesheet" href="style/examples.css">
  <link rel="stylesheet" href="style/parseTree.css">
  <link rel="stylesheet" href="style/semanticsResult.css">
  <link rel="stylesheet" href="style/semanticsEditor.css">
  <link rel="stylesheet" href="style/semanticsEditorWrapper.css">
</head>
<body>
  <div id="topSection">
    <div id="grammarContainer">
      <h2>Grammar</h2>
      <div id="grammars" hidden>
        <select id="grammarList" hidden><option value="">[local storage]</option></select>
        <label id="grammarName" class="unnamed">no file loaded</label>
        <input id="grammarFile" type="file" accept=".ohm" hidden>
        <button id="loadGrammar">Load...</button>
        <button id="saveGrammar">Save...</button>
        <label id="saveIndicator" hidden>
          <div id="saved">Saved</div>
          <div id="edited">Edited</div>
        </label>
      </div>
      <div class="flex-fix"><div class="editorWrapper"></div></div>
    </div>
    <div id="topSplitter" class="splitter vertical"></div>
    <div id="exampleContainer">
      <div id="userExampleContainer">
        <h2>Examples
          <input id="addExampleButton" type="button" value="+"></input>
        </h2>
        <ul id="exampleList"></ul>
        <div id="exampleBottom" class="flex-fix">
          <div class="editorWrapper"></div>
          <div id="neededExamples">
            <ul class="exampleGeneratorUI hidden"></ul>
          </div>
        </div>
      </div>
      <div id="exampleSplitter" class="splitter vertical disabled"></div>
    </div>
  </div>

  <div id="mainSplitter" class="splitter"></div>

  <div id="bottomSection">
    <div id="semanticsContainer" hidden>
      <h2>Semantics
        <input id="addSemanticButton" type="button" value="+"></input>
      </h2>
      <div id="semantics">
      </div>
      <div class="flex-fix"><div class="editorWrapper"></div></div>
    </div>
    <div id="bottomSplitter" class="splitter vertical"></div>
    <div id="visualizerContainer">
      <div id="parseTree"></div>
      <div class="overlay"></div>
    </div>
  </div>
  <div id="timeline"><input id="timeSlider" type="range" step="1"></div>

  <div id="dragOverlay"></div>

  <div id="options">
    <ul>
      <li><input type="checkbox" name="showExampleGenerator"><label>Show example generator</label></li>
      <li><input type="checkbox" name="showFailures"><label>Explain parse</label></li>
      <li><input type="checkbox" name="showSpaces"><label>Show spaces</label></li>
    </ul>
  </div>

  <div id="measuringDiv">
    <div class="pexpr"></div>
  </div>

  <div id="protos" hidden>
    <div class="footer">
      <input type="search"></input><input class="closeButton" type="button" value="Done"></input>
    </div>
    <div class="externalRules"><div class="content"></div></div>
  </div>

  <div id="parseTreeMenu" class="contextMenu" hidden><ul></ul></div>
  <div id="operationMenu" class="contextMenu" hidden><ul></ul></div>
  <div hidden>
    <pre id="sampleGrammar">Arithmetic {
Exp
  = AddExp

AddExp
  = AddExp "+" MulExp  -- plus
  | AddExp "-" MulExp  -- minus
  | MulExp

MulExp
  = MulExp "*" ExpExp  -- times
  | MulExp "/" ExpExp  -- divide
  | ExpExp

ExpExp
  = PriExp "^" ExpExp  -- power
  | PriExp

PriExp
  = "(" Exp ")"  -- paren
  | "+" PriExp   -- pos
  | "-" PriExp   -- neg
  | ident
  | number

ident  (an identifier)
  = letter alnum*

number  (a number)
  = digit* "." digit+  -- fract
  | digit+             -- whole
}</pre>
    <pre id="sampleExamples">
      <pre>2 * (42 - 1) / 9</pre>
      <pre>1+2*3</pre>
      <pre>I CAN HAS CHEEZBURGER?</pre>
      <pre> (  	123   ) </pre>
      <pre>(2+4)*7</pre>
    </pre>
  </div>

  <script src="assets/ohm.min.js"></script>

  <script src="third_party/es6.js"></script>
  <script src="third_party/d3.min.js"></script>
  <script src="third_party/FileSaver.js"></script>
  <script src="third_party/codemirror-5.11/lib/codemirror.js"></script>
  <script src="third_party/codemirror-5.11/addon/search/search.js"></script>
  <script src="third_party/codemirror-5.11/addon/search/searchcursor.js"></script>
  <script src="third_party/checked-emitter-1.0.1.js"></script>
  <script src="third_party/autosize.min.js"></script>
  <script src="third_party/vue-2.0.5.js"></script>

  <script src="assets/visualizer-bundle.js"></script>

  <!-- Scripts that have not yet been moved to CommonJS
  <script src="semanticsHelper.js"></script>
  <script src="semanticsEditorWrapper.js"></script>
  <script src="semanticsEditor.js"></script>
  <script src="semanticsResult.js"></script>
  <script src="semanticsButton.js"></script>
  <script src="persistence.js"></script>
  -->
</body>
</html>
